<!-- 测评分类管理 -->

<template>
	<div>
		<el-breadcrumb :separator-icon="ArrowRight">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>心理测评</el-breadcrumb-item>
			<el-breadcrumb-item>测评分类管理</el-breadcrumb-item>
		</el-breadcrumb>
		<hr />


		<!-- 头部搜索栏 -->
		<div>
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item label="分类">
					<el-select v-model="formInline.classifyName" placeholder="请选择分类" clearable @clear="handleClear3()">
						<el-option v-for="(option,index) in nameList" :key="option.index"
							:value="option.classifyName" />
					</el-select>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="getData">搜索</el-button>
					<el-button type="primary" @click="dialogFormVisible=true">新增测评</el-button>
					<el-button type="danger" @click="delIds()">批量删除</el-button>
				</el-form-item>

			</el-form>


			<!-- 新增测评 -->
			<el-dialog v-model="dialogFormVisible" title="新增测评" width="730px">
				<el-form :model="form">
					<el-form-item label="分类名" :label-width="formLabelWidth">
						<el-input v-model="form.classifyName" placeholder='请输入分类名' />
					</el-form-item>
					<el-form-item label="测评封面图" :label-width="formLabelWidth">
						<el-upload class="avatar-uploader" action="" :show-file-list="false"
							:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
							<img v-if="imageUrl" :src="form.listView" class="avatar" />
							<el-icon v-else class="avatar-uploader-icon">
								<Plus />
							</el-icon>
						</el-upload>
					</el-form-item>
				</el-form>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="addNo()">取消</el-button>
						<el-button type="primary" @click="addYes()">
							确定
						</el-button>
					</div>
				</template>
			</el-dialog>



			<!-- 编辑与删除 -->
			<el-dialog v-model="edit" title="编辑测评" width="730px">
				<el-form :model="editForm">
					<el-form-item label="测评题目" :label-width="formLabelWidth">
						<el-input v-model="editForm.classifyName" placeholder='请输入测评题目' />
					</el-form-item>
					<el-form-item label="测评封面图" :label-width="formLabelWidth">
						<el-upload class="avatar-uploader" action="" :show-file-list="false"
							:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
							<img :src="editForm.listView" class="avatar" />
							<el-icon class="avatar-uploader-icon">
								<Plus />
							</el-icon>
						</el-upload>
					</el-form-item>
				</el-form>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="editNo()">取消</el-button>
						<el-button type="primary" @click="editYes()">
							确定
						</el-button>
					</div>
				</template>
			</el-dialog>


		</div>


		<!-- 表格数据展示 -->
		<div>
			<el-table :data="tableData" border @selection-change="handleSelectionChange"
				style="width: 95%;margin-left: 30px;">
				<el-table-column :selectable="selectable" type="selection" width="55" />
				<el-table-column label="ID" width="120">
					<template #default="scope">{{ scope.row.id }}</template>
				</el-table-column>
				<el-table-column property="classifyName" label="分类名" />
				<el-table-column property="evaluationView" label="封面图">
					<div class="demo-image__placeholder">
						<div class="block">
							<!-- <span class="demonstration">Default</span> -->
							<el-image src="counselorImg" />
						</div>
					</div>
				</el-table-column>

				<el-table-column label="操作">
					<template #default="scope">
						<el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">
							编辑
						</el-button>
						<el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>


		<!-- 分页设置 -->
		<div>
			<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
				:size="size" :disabled="disabled" :background="background"
				layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</div>
	</div>
</template>

<script setup>
	import {
		getCurrentInstance,
		onMounted,
		reactive,
		ref
	} from 'vue'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {
		Plus
	} from '@element-plus/icons-vue'
	// evaluation/page?evaluationName=&evaluationIntro=&pageNum=1&pageSize=10&classifyName=


	// 设置表单元素接收数据
	const formInline = reactive({
		classifyName: '',
	})
	const nameList = reactive([{}])

	// 设置表格接收数据
	const tableData = reactive([{
		id: 0,
		classifyName: '',
		listView: '',
	}])


	// 页面挂载后加载数据
	onMounted(() => {
		getData(),
			getClass()
	})

	// 清除输入框自动搜索
	const handleClear1 = () => {
		formInline.evaluationName = ''
		getData()
	};
	const handleClear2 = () => {
		formInline.evaluationIntro = ''
		getData()
	};
	const handleClear3 = () => {
		formInline.classifyName = ''
		getData()
	};


	// 接收新增数据
	const dialogFormVisible = ref(false)
	const formLabelWidth = '140px'

	const form = reactive({
		classifyName:'',
		listView:''
	})
	const addNo = () => {
		dialogFormVisible.value = false
		ElMessage('取消添加')
	}
	const addYes = () => {
		axios.post('evaluationClassify', {
				classifyName:form.classifyName,
				listView:form.listView
			})
			.then((resp) => {
				if (resp.code == 200) {
					ElMessage({
						message: resp.message,
						type: 'success',
					});
				} else {
					ElMessage.error(resp.message);
				}
			})
			.catch((error) => {
				console.error('Error:', error);
				ElMessage.error('请求失败，请稍后再试');
			})
			.finally(() => {
				dialogFormVisible.value = false
				getData()
				// 清除数据
				form.classifyName='',
				form.listView=''
			})
	};

	// 编辑与删除
	const edit = ref(false)
	const editForm = reactive({})
	const handleEdit = (index, row) => {
		edit.value = true
		// console.log('row', row.id)
		axios.get(`evaluationClassify/${row.id}`).then((resp) => {
			console.log(resp);
			Object.assign(editForm, resp.data);
			// editForm.evaluationClassifyId = resp.data.evaluationClassify.classifyName
		})
	}
	const editNo = () => {
		edit.value = false;
		ElMessage('取消编辑')
	}
	const editYes = () => {
		axios.put('evaluationClassify', editForm).then((resp) => {
				if (resp.code == 200) {
					ElMessage({
						message: resp.message,
						type: 'success',
					});
				} else {
					ElMessage.error(resp.message);
				}
			})
			.catch((error) => {
				console.error('Error:', error);
				ElMessage.error('请求失败，请稍后再试');
			})
			.finally(() => {
				edit.value = false;
				getData()
			})
	};
	const handleDelete = (index, row) => {
		ElMessageBox.confirm(
				'此操作将永久删除该文件, 是否继续?',
				'提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			)
			.then(() => {
				axios.delete(`evaluationClassify/${row.id}`)
					.then((resp) => {
						if (resp.code == 200) {
							ElMessage({
								message: '删除成功',
								type: 'success',
							});
						} else {
							ElMessage.error(resp.message);
						}
					})
					.catch((error) => {
						console.error('Error:', error);
						ElMessage.error('请求失败，请稍后再试');
					})
					.finally(() => {
						getData()
					})
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '取消删除',
				})
			})
	};

	// 批量删除
	const multipleSelection = ref([])
	const ids = ref('')
	const delIds = () => {
		if (multipleSelection.value.length == 0) {
			ElMessage('请选择要删除的数据！')
		} else {
			ElMessageBox.confirm(
					'此操作将永久删除该数据, 是否继续??',
					'提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					}
				)
				.then(() => {
					ids.value = multipleSelection.value.map(row => row.id).join(',')
					console.log(ids.value);
					axios.delete(`evaluationClassify?ids=${ids.value}`).then((resp) => {
							console.log(resp);
							if (resp.code == 200) {
								ElMessage({
									type: 'success',
									message: resp.message,
								})
							} else {
								ElMessage.error(resp.message);
							}
						})
						.catch((error) => {
							console.error('Error:', error);
							ElMessage.error('请求失败，请稍后再试');
						})
						.finally(() => {
							getData()
						})
				})
				.catch(() => {
					ElMessage({
						type: 'info',
						message: '取消删除',
					})
				})
		}
	}
	const handleSelectionChange = (val) => {
		multipleSelection.value = val
	}




	// 设置分页
	const currentPage = ref(1)
	const pageSize = ref(10)
	const total = ref(0)
	const handleSizeChange = (val) => {
		console.log(`${val} items per page`)
		pageSize.value = val
		getData()
	}
	const handleCurrentChange = (val) => {
		console.log(`current page: ${val}`)
		currentPage.value = val
		getData()
	}





	// 获取axios对象实例发送请求
	const axios = getCurrentInstance().appContext.config.globalProperties.axios;
	// 获取表单数据
	const getData = () => {
		axios.get(
				`evaluationClassify/allpage?pageNum=${currentPage.value}&pageSize=${pageSize.value}&classifyName=${formInline.classifyName}`
			)
			.then((resp) => {
				total.value = resp.data.total
				console.log(resp.data.list.length, 'fjskdfhjsakhdfkj');
				console.log(resp.data);

				tableData.splice(0, tableData.length, ...resp.data.list);
			})
	}
	// 获取分类数据
	const getClass = () => {
		axios.get('evaluationClassify').then((resp) => {
			nameList.splice(0, nameList.length, ...resp.data)
			console.log("naemList", nameList[0].id);

		})
	}
</script>

<style scoped>
	.demo-form-inline .el-input {
		--el-input-width: 220px;
	}

	.demo-form-inline .el-select {
		--el-select-width: 220px;
	}

	/* 图片显示 */
	.block {
		/* border: 1px solid #ccc; */
		width: 100px;
		height: 100px;
		background-color: rgb(245, 247, 250);
		text-align: center;
		line-height: 100px;
	}

	/* 文件上传 */
	.avatar-uploader .avatar {
		width: 150px;
		height: 150px;
		display: block;
		border-radius: 5px;
		margin-right: 5px;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		background-color: rgb(251, 253, 255);
		font-size: 28px;
		color: #8c939d;
		width: 150px;
		height: 150px;
		text-align: center;
		border: 1px dashed rgb(192, 204, 218);
		border-radius: 5px;
	}
</style>